<template>
    <div class="app-container">
        <el-form
            class="searchForm"
            :inline="true"
            size="mini"
            ref="searchForm"
            :model="searchForm"
        >
            <el-form-item label="标签名称">
                <el-input
                    clearable
                    v-model="searchForm.name"
                    placeholder="请输入标签名称"
                />
            </el-form-item>

            <el-form-item>
                <el-button
                    type="primary"
                    size="mini"
                    icon="el-icon-search"
                    @click="doSearch"
                    >搜索</el-button
                >
                <el-button
                    type="default"
                    size="mini"
                    icon="el-icon-refresh"
                    @click="resetSearch"
                    >重置</el-button
                >
            </el-form-item>
        </el-form>
        <div class="searchs-content">
            <el-button
                type="primary"
                v-permission="['om:tag:add']"
                size="mini"
                plain
                icon="el-icon-plus"
                @click="addDialog"
                >新增</el-button
            >
        </div>
        <Table
            :tableHeader="tableHeader"
            :tableData="tableData"
            :tableLoading="listLoading"
        >
            <template slot="action" slot-scope="scope">
                <el-button
                    type="primary"
                    size="mini" v-permission="['om:tag:association']"
                    @click="handleEquip(scope.row)"
                    >设备列表</el-button
                >
                <el-button
                    type="danger"
                    v-permission="['om:tag:delete']"
                    size="mini"
                    @click="handleDelete(scope.row)"
                    >删除</el-button
                >
            </template>
        </Table>
        <pagination
            v-if="total > 0"
            :total="total"
            :page.sync="searchForm.pageNum"
            :limit.sync="searchForm.pageSize"
            @pagination="fetchData"
        />

        <!-- 弹框 -->
        <Dialog
            :visible="visible"
            width="28%"
            :loading="dialogBtnLoading"
            :title="dialogTitle"
            @confirmDialog="confirmDialog"
            @cancelDialog="cancelDialog"
        >
            <el-form
                ref="dialogForm"
                :model="dialogForm"
                label-width="90px"
                :rules="dialogRules"
                size="small"
            >
                <el-form-item label="标签名称" prop="name">
                    <el-input
                        clearable
                        class="ipt"
                        v-model="dialogForm.name"
                        placeholder="请输入标签名称"
                    />
                </el-form-item>
            </el-form>
        </Dialog>

        <!-- 设备列表 -->
        <Dialog
            :visible="equipTagVisible"
            width="50%" :isFooter="false"
            title="设备列表"
            @confirmDialog="equipTagConfirmDialog"
            @cancelDialog="equipTagVisible = false"
        >
            <EquipTagList :currentRow="currentRow" :equipTagVisible="equipTagVisible"></EquipTagList>
        </Dialog>
    </div>
</template>

<script>
import { tags } from "@/api/system";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import Table from "@/components/Table";
import Dialog from "@/components/Dialog";

import { handleConfirm } from "@/utils/messageBox";
import { removeNullUndefined } from "@/utils/index.js";

import EquipTagList from "./components/equipTagList.vue";
export default {
    components: { Pagination, Table, Dialog, EquipTagList },
    data() {
        return {
            listLoading: true,
            total: 0,
            searchForm: {
                pageNum: 1,
                pageSize: 15,
                name: "",
            },

            tableHeader: [
                {
                    type: "index",
                    label: "序号",
                    width: "60",
                    fixed: true,
                },
                {
                    label: "标签名称",
                    prop: "name",
                },
                {
                    label: "创建人",
                    prop: "createBy",
                },
                {
                    label: "创建时间",
                    prop: "createTime",
                },
                { slot: "action", label: "操作", width: "180" },
            ],
            tableData: [],
            visible: false, //弹框标识
            dialogForm: {
                name: "",
            },
            dialogRules: {
                name: [
                    {
                        required: true,
                        message: "请输入标签名称",
                        trigger: "blur",
                    },
                ],
            },
            dialogTitle: "",

            dialogBtnLoading: false,

            currentRow: {},
            equipTagVisible: false,
        };
    },

    async created() {
        this.fetchData();
    },
    methods: {
        fetchData(val) {
            this.searchForm.pageNum = val ? val.page : this.searchForm.pageNum;
            this.listLoading = true;
            this.tableData = [];
            this.total = 0;
            tags("/list", "get", { ...removeNullUndefined(this.searchForm) })
                .then((res) => {
                    this.tableData = res.data;
                    this.total = +res.total;

                    this.searchForm.pageNum = +res.pageNum;
                })
                .finally(() => {
                    this.listLoading = false;
                });
        },

        // 弹框取消
        cancelDialog() {
            this.visible = false;
            this.clearData();
            this.resetDialogForm("dialogForm");
        },
        clearData() {
            this.dialogForm = {
                name: "",
            };
        },
        // 弹框确认
        confirmDialog() {
            this.submitDialogForm("dialogForm");
        },
        // 新增
        async addDialog(row) {
            this.visible = true;

            this.dialogTitle = "新增";
            this.currentRow = {};
            this.dialogForm = {
                name: "",
            };
        },
        handleDelete(row) {
            handleConfirm("删除后不可恢复，确定继续？", "warning", "提示")
                .then((res) => {
                    this.doDelete(row);
                })
                .catch((err) => {});
        },
        doDelete(row) {
            tags(`/${row.id}`, "delete").then((res) => {
                if (res.code == 200) {
                    this.$message.success(res.message);
                    this.fetchData();
                }
            });
        },

        submitDialogForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    handleConfirm(`确定要新增吗？`, "warning", "提示")
                        .then((res) => {
                            this.doAdd();
                        })
                        .catch((err) => {});
                } else {
                    return false;
                }
            });
        },
        resetDialogForm(formName) {
            this.$refs[formName].resetFields();
        },

        resetSearch() {
            this.searchForm = {
                pageNum: this.searchForm.pageNum,
                pageSize: this.searchForm.pageSize,
                name: "",
            };
        },
        doSearch() {
            this.searchForm.pageNum = 1;
            this.fetchData();
        },

        doAdd() {
            this.dialogBtnLoading = true;

            tags("/insert", "post", this.dialogForm)
                .then((res) => {
                    if (res.code == 200) {
                        this.$message.success(res.message);
                        this.visible = false;
                        this.fetchData();
                    }
                })
                .finally(() => {
                    this.dialogBtnLoading = false;
                });
        },
        // 设备列表
        handleEquip(row) {
            this.currentRow=row;
            this.equipTagVisible = true;
        },
        equipTagConfirmDialog() {},
    },
};
</script>
<style lang="scss" scoped>
.ipt {
    width: 95%;
}
.searchForm {
    padding-left: 8px;
    .el-form-item {
        margin-bottom: 8px;
    }
}
</style>
